
<template>
  <div class="user">
    <div class="user_card">
      <!-- 用户信息 -->
      <div class="user_info">
        <!-- 头像 -->
        <img :src="userInfo.photo" class="user_pto">
        <div class="info">
          <span class="user_name" v-if="username == ''">{未登录}</span>
          <span class="user_name" v-else >{{userInfo.name}}</span>
          <span class="user_rec">申请认证</span>
        </div>
      </div>
      <!-- 用户数据 -->
      <div class="user_data">
        <div class="data">
          <p class="data_dynamic">{{userInfo.art_count}}</p>
          <p>动态</p>
        </div>
        <div class="data">
          <p class="dada_attention">{{userInfo.follow_count}}</p>
          <p>关注</p>
        </div>
        <div class="data">
          <p class="data_fen">{{userInfo.fans_count}}</p>
          <p>粉丝</p>
        </div>
      </div>
    </div>
    <!-- 用户功能 -->
    <div class="user_until">
      <van-cell title="编辑资料"  @click="editUser" icon="edit">

  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
     <van-icon name="arrow" />
    </template>
    </van-cell>

    <van-cell title="小思同学" icon="chat-o">
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
     <van-icon name="arrow" />
    </template>
    </van-cell>

    <van-cell title="退出登录" icon="warning-o" @click="editLogin">
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
     <van-icon name="arrow" />
    </template>
    </van-cell>
    </div>
  </div>
</template>

<script>

import { mapActions, mapMutations, mapState } from 'vuex'
// import bus from '../utils/bus.js'
export default {
  name: 'User',

  data () {
    return {
      username: '',
      time: new Date(),
      img: '../assets/logo.png',
      birthday: '1980-01-01',
      userInfoList: []

    }
  },
  methods: {
    // 从 vuex 中把指定名称的 Action 方法映射到组件中使用
    ...mapActions(['initUserInfo']),
    ...mapMutations(['clearToken']),
    // 获取用户的基本信息(用户Id、用户名、头像，动态数，关注数，粉丝数)

    async editLogin () {
      // const token = localStorage.getItem('token')
      const confirmResult = await this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出登录吗？'
        }).catch(err => {
          // 这里把 err return 给了 confirmResult
          return err
        })
      // 如果点击取消，则不操作
      if (confirmResult === 'cancel') {
        return
      }
      this.clearToken()
      localStorage.removeItem('state')
      this.$router.push('/login')
    },
    editUser () {
      this.$router.push({ name: 'user-edit' })
    }

  },
  created () {
    // 路由传递参数
    // 1、命名参数name+params
    // 2、查询参数path / name +query
    // this.initUserInfo()
    this.username = this.$route.query.username
  },
  // 组件被激活后,就会刷新用户信息
  activated () {
    this.initUserInfo()
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;

}
.user_card{
  background-color: #007BFF;
  padding:0.4054rem 0 ;
  .user_info{
    display: flex;
    margin-top: 0.2703rem;
    margin-left: 0.8054rem;
    .user_pto{
      width: 1.5514rem;
      height:  1.5514rem;
      background-color: #fff;
      border-radius: 50%;

    }
    .info{
      flex: 1;
      padding-left: 0.3054rem;
      .user_name{
        font-weight: 600;
        color: #fff;
        font-size: 0.2865rem;
        display: block;
        padding: 0.1103rem 0;
      }
      .user_rec{
        // width:40px;
        display: inline-flex;
        padding: 0.0551rem 0.1003rem;
        background-color: #fff;
        color: #007BFFFF;
        text-align: center;
        border-radius: 0.08054rem;
        font-size: 0.1243rem;
        cursor: pointer;

      }
    }
  }
  .user_data{
    display: flex;
    margin: 1.108rem 0 0.5rem;
    color: #fff;

-webkit-user-seletct: none;
-moz-user-seletct: none;
-ms-user-seletct: none;
    .data{
      display: flex;
      flex: 1;
       flex-direction: column;
      p{
        font-size: 0.3784rem;
        text-align: center;
      }
    }
  }
}
.user_until{
  width: 100%;

  background-color: #fff;
  cursor: pointer;

  .search-icon {
    font-size: 0.4324rem;
    line-height: inherit;
  }

}
</style>
